/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package view;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.StrokeLineCap;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Cursor;
import vinciappli.Templates;
import javafx.scene.control.Label;
import javafx.geometry.HPos;
import javafx.scene.layout.LayoutInfo;
import javafx.scene.text.Font;
import javafx.geometry.VPos;

/**
 * @author Sik
 */

public class Thumbnail extends Group
{
    public var x : Number;
    public var y : Number;
    public var txt : String;
    public var bodyTxt : String;
    public var color : Color = Color.WHITESMOKE;
    public-read var height : Number = 35;
    public-read var fullWidth : Number = Templates.MAP_WIDTH - 210 ;
    public-read var width : Number = fullWidth/3 - 15;
    public var xPosition : Number;
    public var isOpen : Boolean = false;

    var fillGrad = bind LinearGradient
    {
        startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
        proportional: true
        stops: [ Stop { offset: 0.0 color: color },
                 Stop { offset: 1.0 color: Color.BLACK } ]
    }

    var top : Rectangle =
    bind Rectangle
    {
        translateX: bind xPosition
        height: height
        width: width
        arcWidth: 20 arcHeight: 20
        fill: fillGrad
        strokeLineCap: StrokeLineCap.ROUND
        cursor: Cursor.HAND
    }

    var topContent : Label =
    Label
    {
        translateX: bind xPosition
        text: bind txt
        textFill: Color.WHITE
        font: Font
        {
            name: "Impact"
            size: 22
        }
        layoutInfo: LayoutInfo
        {
            width: width
            height: height - 10
        }
        hpos: HPos.CENTER
        vpos : VPos.CENTER
    }

    var body : Rectangle =
    bind Rectangle
    {
        translateY: height - 10
        height: 200
        width: fullWidth
        arcWidth: 20 arcHeight: 20
        fill: Color.BLACK
    }

    var bodyContent : Label =
    Label
    {
        translateX: 20
        translateY: height + 40
        width: fullWidth - 40;
        text: bind bodyTxt
        textFill: Color.WHITE
        font: Font
        {
            name: "Impact"
            size: 16
        }
        layoutInfo: LayoutInfo
        {
            width: Templates.MAP_WIDTH - 20
        }
        hpos: HPos.CENTER
    }

    init
    {
        ini();
        translateX = x;
        translateY = y;
        blocksMouse = true;
        content =
            [
                top, topContent, body, bodyContent
            ];
    }

    public function ini(): Void
    {

    }

    public function close(): Void
    {
    }
}
